html,
body {
  margin: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  background-color: aliceblue;
}

/* 自定义属性 */
@property --m {
  /* 定义类型 */
  syntax: '<integer>';
  /* 是否继承 */
  inherits: false;
  initial-value: 0;

}

@property --s {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;

}

@property --ms {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;

}


.counter {
  display: grid;
  gap: 50px;
  grid-template-areas:
    "clock clock"
    "start reset"

}

.clock {
  grid-area: clock;
  text-align: center;
  font-size: 100px;
  padding: .2em .5em;
  border: 10px solid rgba(255, 255, 255, .3);
  border-radius: 20px;
  background-color: #3a3a3a;
  color: #fff;
  /* 计数器 */
  counter-reset: minitus var(--m) seconds var(--s) ms var(--ms);
  animation: minitus 3600s infinite steps(60, end),
    seconds 60s infinite steps(60, end),
    ms 1s infinite steps(100, end);
  /* 动画一开始停止 */
  animation-play-state: paused;
}

@keyframes minitus {
  to {
    --m: 59;
  }
}

@keyframes seconds {
  to {
    --s: 59;
  }
}

@keyframes ms {
  to {
    --ms: 99;
  }
}

.clock::before {
  content: counter(minitus, decimal-leading-zero) ':'counter(seconds, decimal-leading-zero) ':'counter(ms, decimal-leading-zero);
  text-shadow: 3px 3px 3px black;
}

.btn {
  text-align: center;
  padding: 1em;
  font-size: 36px;
  background-color: chocolate;
  color: #fff;
  grid-area: start;
  user-select: none;
  cursor: pointer;
  transition: .2s;

}

.btn:hover {
  filter: brightness(1.1);
}

.reset {
  grid-area: reset;
  background-color: #f44336;
}

.start::before {
  content: '开始';
}

:checked~.clock {
  /* 选中开始动画 */
  animation-play-state: running;
}

:checked~.start::before {
  content: "暂停";
}

:checked~.reset {
  /* 鼠标事件暂停 */
  pointer-events: none;
  opacity: .65;
}

.reset:active+.clock {
  animation: none;
}